<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <title>Activity List</title>
    <!-- 为这个页面添加一个样式 -->
    <style>
        h1 {
            color: blue;
            font-size: 36px;
            text-align: center;
        }

        table {
            border-collapse: collapse;
            margin: 0 auto;
        }

        th,
        td {
            border: 1px solid black;
            padding: 10px;
            text-align: center;
        }

        th {
            background-color: #ccc;
        }

        tr:nth-child(even) {
            background-color: #f2f2f2;
        }
    </style>
</head>

<body>
    <h1>Activity List</h1>
    <table>
        <thead>
            <tr>
                <th>ID</th>
                <th>Title</th>
                <th>Category</th>
                <th>StartTime</th>
                <th>EmdTime</th>
                <th>State</th>

            </tr>
        </thead>
        <tbody>


        </tbody>
    </table>
</body>

<!--
     使用ajax数据实现异步请求
-->
<script>

    // 声明XMLHttpRequest对象
    var httpRequest = new XMLHttpRequest();

    // 对事件绑定回调函数

    httpRequest.onreadystatechange = function () {
        console.log(httpRequest.statusText);

        // 当请求状态为4且请求成功时，将获取到的值放置到表格中
        if (httpRequest.readyState === XMLHttpRequest.DONE && httpRequest.status === 200) {
            var activities = JSON.parse(httpRequest.responseText);
            var tbody = document.querySelector("tbody");
            for (var i = 0; i < activities.length; i++) {
                var activity = activities[i];
                // 创建tr标签
                var tr = document.createElement("tr");

                // 创建td标签
                // id 属性
                var idTd = document.createElement("td");
                idTd.textContent = activity.id;
                tr.appendChild(idTd);	

                // title属性
                var titleTd = document.createElement("td");
                titleTd.textContent = activity.title;
                tr.appendChild(titleTd);

                // category属性
                var categoryTd = document.createElement("td");
                categoryTd.textContent = activity.category;
                tr.appendChild(categoryTd);

                // startTime属性
                var startTimeTd = document.createElement("td");
                startTimeTd.textContent = activity.startTime;
                tr.appendChild(startTimeTd);

                // endTime属性
                var endTimeTd = document.createElement("td");
                endTimeTd.textContent = activity.endTime;
                tr.appendChild(endTimeTd);

                // state属性
                var stateTd = document.createElement("td");
                stateTd.textContent = activity.state;
                tr.appendChild(stateTd);


                tbody.appendChild(tr);
            }
        }
    }

    // 打开连接
    httpRequest.open("GET", "http://127.0.0.1:8080/activity/dofindactivities", true); 
    // 实现连接
    httpRequest.send();

	// 注意AJAX有跨域的问题,在浏览器访问时使用127.0.0.1这个域名进行使用,不要使用localhost来访问


</script>

</html>